<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        .main {
            width: 560px;
            margin: auto;
        }

        .week,.days {
            display: flex;
        }

        .days {
            flex-wrap: wrap;
        }

        .week>li {
            font-weight: 600;
        }

        .week>li,.days>li {
            width: 80px;
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
        }

        .header {
            display: flex;
            justify-content: space-between;
            padding: 10px;
        }

        .month-buttons>span {
            margin: 0px 5px 0px 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <main class="main">
        <header class="header">
            <aside class="showYearMonth"></aside>
            <aside class="month-buttons">
                <span onclick="monthChange(-1)">上个月</span>
                <span onclick="monthChange(1)">下个月</span>
            </aside>
        </header>
        <ul class="week">
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
            <li>日</li>
        </ul>
        <ul class="days">

        </ul>
    </main>
    <script>
        let days = document.querySelector(".days");
        let showYearMonth = document.querySelector(".showYearMonth");

        // 每月的天数
        let monthDays = [31,28,31,30,31,30,31,31,30,31,30,31];
        let month;
        let year;

        // 当前日子
        let date = new Date();
        let todayYear = date.getFullYear();
        let todayMonth = date.getMonth();
        let todayDate = date.getDate();

        // 计算第一天星期几
        function getFirstDay() {
            date.setDate(1);
            // 返回第一天星期几
            let day = date.getDay();
            if (day == 0) {
                return 6;
            } else {
                return day - 1;
            }
        }

        function print() {
            let resultStr = "一\t二\t三\t四\t五\t六\t日\n";
            month = date.getMonth();
            let days = monthDays[month];
            year = date.getFullYear();
            console.log(`${year}年${month + 1}月`);
            showYearMonth.innerText = `${year}年${month + 1}月`;
            // 二月计算是否是闰年
            if (month == 1) {
                if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) {
                    days = 29;
                }
            }
            let firstDay = getFirstDay();
            let j = 0;
            for (let i = 0;i < firstDay;i ++) {
                resultStr += "\t";
                j ++;
                if (j % 7 == 0) {
                    resultStr += "\n";
                }
                createLi("");
            }
            for (let i = 1;i <= days;i ++) {
                if (year == todayYear && month == todayMonth && i == todayDate) {
                    resultStr += "'" + i + "'\t";
                } else {
                    resultStr += i + "\t";
                }
                j ++;
                if (j % 7 == 0) {
                    resultStr += "\n";
                }
                createLi(i);
            }
            console.log(resultStr);
        }

        function createLi(text) {
            let li = document.createElement("li");
            li.innerText = text;
            days.appendChild(li);
        }

        function monthChange(i) {
            if (i == -1 && month == 0) {
                date.setMonth(12);
                date.setFullYear(year - 1);
            } else if (i == 1 && month == 12) {
                date.setMonth(0);
                date.setFullYear(year + 1);
            } else {
                date.setMonth(month + i);
            }
            print();
        }

        print();
    </script>
</body>
</html>